<html>
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
</head>
<body>
	<div class="top">
		<ul>
			<li style="font-size:38px; background-color:">购票网</li>&nbsp&nbsp&nbsp&nbsp
			<li style="color:#4876FF; font-size:26px;">用户注册</li>&nbsp&nbsp|
			<li><a href="login.html">登录</a></li>
		</ul>
	</div>
	<div class="body">
		<form class="body-form" id="app">
			<div style="height:45px; padding:3px 5px; margin-bottom:60px; padding-bottom:16px;background-color:#1E90FF;border-radius:15px;"><p style="font-size:22px;">用户信息</p></div>
			<div class="body-form-div">
				*用户名：&nbsp&nbsp&nbsp<input type="text" class="body-form-input" placeholder="账号/用户名" v-model="userName">
			</div>
			<div class="body-form-div">
				*登录密码：<input type="password" class="body-form-input" placeholder="密码/登录密码" v-model="password1">
			</div>
			<div class="body-form-div" style="margin-bottom:15px;">
				*确认密码：<input type="password" class="body-form-input" placeholder="密码/登录密码" v-model="password2">
			</div>
			<div style="font-size:15px; color:#FF0000; margin:10px 0px 0px 0px; ">
				{{message}}
			</div>
			<div class="body-form-div" v-if="yz1">
				<input type="button" @click="yz()" value="确认注册" style="color:#FFFFFF; background-color:#FF7F00; width:100px; height:40px;border-radius:5px;">
			</div>
			<div class="body-form-div" v-if="yz2">
				<input type="button" @click="submit()" value="确认注册" style="color:#FFFFFF; background-color:#FF7F00; width:100px; height:40px;border-radius:5px;">
			</div>
		</form>
	</div>
	<div class="bottom">
		<ul>
			<li>车票管理系统</li>
		</ul>
	</div>
</body>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
	new Vue({
		el : '#app',
		data : {
			userName : '',
			password1 : '',
			password2 : '',
			message : '',
			yz1 : true,
			yz2 : false
		},
		methods : {
			yz : function(){
				if(this.userName==''){
					return this.message = '用户名不能为空';
				}else if(this.password1==''){
					return this.message = '密码不能为空';
				}else if(this.password2==''){
					return this.message = '请再次输入密码';
				}else if(this.password1!=this.password2){
					return this.message = '密码输入不一致';
				}
				alert("请确认密码填写无误")
				return this.yz1 = false,this.yz2 = true;
			},
			submit : function(){
				var target = this;
				axios.post('/common/logon', {
					userName: this.userName,
					password: this.password1  
				})
				.then(function (response) {
					  var success = response.data.success;
					  if(success == false){
						  target.message = response.data.errorName + "!";
					  }else{
						  alert("注册成功");
						  
						  window.location.href = "/Login.html";
					  }
				  })
				  .catch(function (error) {
				    console.log(error);
				  });  	
			}
		}
	})
</script>
<style type="text/css">
	a:hover{
		color:#EE0000;
	}
	body,ul,li,a{
		margin:0px 0px;
		list-style:none;
		text-decoration:none;
	}
	.top{
		background-color:#00B2EE;
		width:auto;
		height:80px;
		padding-top:30px;
		border-bottom:double 2px #CDC9C9;
	}
	.top ul li{
		display:inline;
	}
	.body{
		background-color:#FFFFFF;
		width:auto;
		height:700px;
		margin:0px 100px;
		text-align:center;
		padding:120px 0px 0px;
	}
	.body-form{
		background-color:#FFFFFF;
		width:800px;
		height:400px;
		padding-top:0px;
		margin:auto;
		border:double 2px #787878; 
		border-radius:15px;
	}
	.body-form-div{
		margin-top:15px;
	}
	.body-form-input{
		padding:6px 8px;
		width:260px;
		border:double 2px #CDC9C9;
	}
	.bottom{
		background-color:#787878;
		text-align:center;
		height:120px;
		margin-top:6px;
		border-bottom:double 2px #3B3B3B;
		border-top:double 2px #3B3B3B;
		padding-top:30px;
	}
</style>
</html>
